<template>
  <h2>{{ person.name }}</h2>
  <button @click="updateName">更新 name</button>
  <div>Test</div>
</template>
<script>
import {
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from 'vue'
export default {
  setup() {
    const person = reactive({
      name: 'xxx',
    })
    console.log('#1 setup')
    onBeforeMount(() => {
      console.log('#2.1 onBeforeMount')
    })
    onBeforeMount(() => {
      console.log('#2.2 onBeforeMount')
    })
    onMounted(() => {
      console.log('#3 onMounted')
    })
    onBeforeUpdate(() => {
      console.log('#4 onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('#5 onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('#6 onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('#7 onUnmounted')
    })
    const updateName = () => {
      person.name = '张三'
    }
    return {
      person,
      updateName,
    }
  },
}
</script>
